<template>
  <div class="SmallBlock">
    <div class="main" @click="goDetail(article_id);ClickAdd(article_id)">
        <div class="img">
            <el-image :src="image_url" fit="cover"></el-image>
        </div>
        <div class="title">
            <h1>{{title}}</h1>
            <p>{{digest}}</p>
        </div>
        <div class="author">
            <el-image class="head-img" :src="header_url" fit="cover"></el-image>
            <span class="name">{{user_nick_name}}</span>
        </div>
        <div class="message">
            <el-tag>{{one_source}}</el-tag>
            <i class="iconfont icon-yanjing">{{clicks}}</i>
            <i class="iconfont icon-dianzan">{{likes}}</i>
            <i class="iconfont icon-pinglun">{{comments}}</i>
            <i class="iconfont icon-shoucang">{{starts}}</i>
        </div>
        <div class="time">
            <div class="complete" >{{create_time}}</div>
        </div>
    </div>
    <div class="start_time" v-if="start_time">{{startTime}}</div>
    <div class="delete" v-if="start_time" @click="deleteStart">删除收藏</div>
    <div class="edit" v-if="edit_time" @click="edit(article_id)">编辑</div>
    <div class="delete_detail" v-if="edit_time" @click="deleteDetail">删除文章</div>
  </div>
</template>

<script>
import { format } from 'timeago.js';
import { nanoid } from 'nanoid';
export default {
    name:'SmallBlock',
    props:['config'],
    data() {
        return {
            CONFIG:null,
            create_time:'',
            user_nick_name:'',
            header_url:'',
            image_url:'',
            title:'',
            digest:'',
            clicks:'',
            likes:'',
            comments:'',
            starts:'',
            one_source:'',
            article_id:'',
            start_time:''
        };
    },
    created(){
        this.init();
    },
    methods:{
        //移除收藏
        deleteStart(){
            this.$confirm('确定么?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$store.dispatch('personalCenter/reqDeleteStart',this.article_id).then((result)=>{
                    if(result.data.status == '200'){
                        this.$message({
                            type: 'success',
                            message: '成功!',
                            duration:2000,
                            onClose:()=>{
                                this.$router.replace({
                                    path:'/midTime',
                                    query:{to:'PStart'}
                                })
                            }
                        });
                    }else{
                        this.$message({
                            type: 'error',
                            message: '未知错误!'
                        });
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
            }   );          
            });
        },
        //跳转
        goDetail(id){
            let routeUrl = this.$router.resolve({
                name:'Detail',
                query:{from:`${this.$route.path.substr(1)}`,id,fix:nanoid(5)},
            })
            window.open(routeUrl.href, '_blank');
         },
        //点击量增加
        ClickAdd(id){
            this.$store.dispatch('base/reqClickAdd', id);
        },
        //删除文章
        deleteDetail(){
            this.$confirm('此操作将永久删除文章, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$store.dispatch('personalCenter/reqDeleteDetail', this.article_id).then((result)=>{
                    if(result.data.status == '200'){
                        this.$message({
                            type: 'success',
                            message: '删除成功!',
                            duration:2000,
                            onClose:()=>{
                                this.$router.replace({
                                    path:'/midTime',
                                    query:{to:'PDetail'}
                                })
                            }
                        });
                    }else{
                        this.$message({
                            type: 'error',
                            message: '未知错误'
                        });   
                    }
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
        },
        //编辑
        edit(id){
            let routeUrl = this.$router.resolve({
                name:'Edit',
                query:{id},
            })
            window.open(routeUrl.href, '_blank');
        }
    },
    watch: {
        config(newValue, oldValue) {
          this.init();
        },
    },
    computed: {
        init() {
            return ()=>{
                this.CONFIG = this.config
                this.user_nick_name = this.CONFIG.user_nick_name
                this.header_url = this.CONFIG.header_url
                this.image_url = this.CONFIG.image_url
                this.title = this.CONFIG.title
                this.digest = this.CONFIG.digest
                this.clicks = this.CONFIG.clicks
                this.likes = this.CONFIG.likes
                this.comments = this.CONFIG.comments
                this.starts = this.CONFIG.starts
                this.one_source = this.CONFIG.one_source
                this.create_time = this.CONFIG.create_time
                this.start_time = this.CONFIG.start_time
                this.article_id = this.CONFIG.article_id
                let t = format(this.create_time,'zh_CN')
                if(Number(t.split(' ')[0]) >1  && t.split(' ')[1] == '年前'){
                    this.create_time = this.$dayjs.utc(this.create_time).local().format('YYYY/MM/DD HH:mm:ss');
                }else{
                    this.create_time = t
                }
            }
        },
        startTime(){
            return format(this.start_time,'zh_CN')
        },
        edit_time(){
            return this.$route.fullPath.includes('PDetail')
        }
    },
}
</script>

<style lang="less" scoped>
    .SmallBlock{
        display: flex;
        height: 180px;
        margin-top:15px ;
        .main{
            width: 100%;
            min-height: 150px;
            border: 2px  black solid;
            border-radius: 1em;
            cursor: pointer;
            box-shadow: 10px 10px 0px rgb(48, 43, 43);
            transition: transform 0.2s ease-out;
            margin-bottom: 40px;
            display: flex;
            align-items: center;
            position: relative;
            background-color:white ;
            margin-right:10px ;
            &:hover{
                transform: translate(0,-10px);
                box-shadow: 10px 10px 0px rgb(157, 216, 142);
            }
            &>.img{
                width: 100px;
                height: 100px;
                border: 6px solid rgb(139, 136, 136);
                border-radius: 1em;
                overflow: hidden;
                position: absolute;
                left: 20px;
                .el-image{
                    width: 100px;
                    height: 100px;
                }
            }
            &>.title{
                position: absolute;
                top: 20px;
                left: 150px;
                h1{
                    font-size: 2.2857rem;
                }
                p{
                    font-size: 16px;
                }
            }
            &>.author{
                width: 200px;
                height: 30px;
                position: absolute;
                bottom: 25px;
                left: 153px;
                display: flex;
                flex-direction: row;
                user-select: none;
                .head-img{
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                }
                span{
                    line-height: 30px;
                    height: 30px;
                    display: block;
                }
            }
            &>.message{
                position: absolute;
                right: 30px;
                bottom: 15px;
                display: flex;
                flex-direction: row;
                .el-tag {
                    font-size:20px ;
                    color: white;
                    background-color:black ;
                    border: thick double white ;
                    height: 40px;
                    margin-right:5px ;
                    user-select: none;
                }
                i{
                    line-height: 40px;
                    color: black;
                    margin-left:5px ;
                    margin-right:5px ;
                    font-weight:bolder ;
                    user-select: none;
                }
            }
            &>.time{
                position: absolute;
                top: 21px;
                right: 36px;
                font-size:18px ;
                user-select: none;

                .oneDay,.oneMonth{
                    display: flex;
                    flex-direction:row ;
                    user-select: none;
                }
            }
        }
        &>div:not(:first-child){
            height: 50px;
            width: 1em;
            padding:50px 2% 50px 2%;
            border: 2px solid black;
            border-radius: 1em;
            margin-left:20px ;
            margin-right:0px ;
            transition: transform 0.3s ease-in-out;
            user-select: none;
            display: flex;
            justify-content: center;
            align-content: center;
            background-color: white ;
            &:hover{
                transform: translateY(-10px);
                background-color: black;
                color: white;
            }
        }
        &>div:not(.main,.start_time){
            cursor: pointer;
        }
        .edit{
            font-size:20px ;
        }
    }
</style>